<template>
  <view class="wechat" style="padding: 30rpx">
    <view style="margin-bottom: 30rpx; font-weight: 700">账号列表</view>
    <view class="ip-item dispaly-just-between" style="padding: 30rpx">
      <view style="font-weight: 700">绑定微信</view>
      <view style="color: #777" @click="bandWeChat">{{
        openId ? "已绑定" : "未绑定"
      }}</view>
    </view>
    <view class="ip-item dispaly-just-between" style="padding: 30rpx">
      <view style="font-weight: 700">绑定绑定手机号</view>
      <view style="color: #777">{{
        phonenumber ? phonenumber : "未绑定"
      }}</view>
    </view>
    <view class="wechat-contens"> </view>
    <view>
      <view class="wechat-content" v-if="!openId">
        <text>您尚未绑定微信，绑定登录更便捷</text>
        <text>点击下方按钮绑定</text>
      </view>
      <view class="ip-item" v-if="!phonenumber">
        <input
          type="number"
          maxlength="11"
          placeholder="请输入手机号"
          v-model="formData.phoneNum"
        />
      </view>
      <view class="wechat-button" @click="getWeChatCode" v-if="!openId">
        <button>确认绑定微信</button>
      </view>
      <view class="wechat-button" v-if="!phonenumber" @click="bandTelPhone">
        <button>确认绑定手机</button>
      </view>
    </view>
  </view>
</template>
<script setup>
import { isWechat, checkWeChatCode, getWeChatCode } from "@/utils/util";
import { ref } from "vue";
import { getUserInfo, bandTel, bandWx, getOpenId } from "@/api/apiList";
import { onLoad } from "@dcloudio/uni-app";

const tip = ref("");
const userInfo = ref({});
const openId = ref("");
const phonenumber = ref("");
const nickName = ref("");
const getUserInfoData = async () => {
  const res = await getUserInfo();
  if (res.code == 200) {
    userInfo.value = res.data;
    phonenumber.value = userInfo.value.phonenumber;
    openId.value = userInfo.value.openId;
    nickName.value = userInfo.value.nickName;
    if (!userInfo.value.openId) {
      tip.value = "您尚未绑定微信，绑定登录更便捷";
    } else if (!userInfo.value.phonenumber) {
      tip.value = "您尚未绑定手机号码";
    }
  }
};

// 绑定微信
const bandWeChat = async (code) => {
  const res = await bandWx({ wxCode: code });
  uni.showLoading({
    title: "正在绑定",
  });
  if (res.code == 200) {
    uni.hideLoading();
    uni.showToast({
      title: "绑定微信成功",
      icon: "none",
    });
    setTimeout(() => {
      reload();
    }, 1000);
  }
};

//绑定手机
const formData = ref({
  phoneNum: "",
});
const bandTelPhone = async () => {
  const res = await bandTel(formData.value);
  uni.showLoading({
    title: "正在绑定",
  });
  if (res.code == 200) {
    uni.hideLoading();
    uni.showToast({
      title: "绑定手机成功",
      icon: "none",
    });
    setTimeout(() => {
      reload();
    }, 1000);
  }
};

const reload = () => window.location.reload();

const isWeixin = ref(false);
onLoad(async (option) => {
  await getUserInfoData();
  // isScan.value = option.isScan ? option.isScan : ''
  isWeixin.value = isWechat();
  if (isWeixin.value) {
    let code = checkWeChatCode();
    if (code) {
      bandWeChat(code);
    }
  }
});
</script>
<style lang="scss" scoped>
.wechat-content {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  margin-top: 80rpx;

  text {
    font-family: PingFang SC Bold;
    font-size: 16px;
    font-weight: normal;
    color: #111111;

    &:nth-last-child(1) {
      font-size: 13px;
      color: #777777;
      margin-top: 30rpx;
    }
  }
}

.wechat-button {
  margin: 0 30rpx;
  margin-top: 130rpx;

  button {
    height: 54px;
    border-radius: 8px;
    background: #ffffff;
    box-sizing: border-box;
    border: 1px solid #0753fd;
    font-family: PingFang SC Medium;
    font-size: 16px;
    color: #0753fd;
    display: flex;
    align-items: center;
    justify-content: center;
  }
}
</style>
